<template>
	<m-layout class="wallet flex-column" title="我的钱包" :scrollTop="scrollTop" color="#ffffff" scrollColor="#474747"
		gap="30 24 20" barBg="unset">
		<m-block class="totalBox">
			<view class="_total pt-32 flex-column">
				<view class="flex pl-24 pr-24">
					<view class="flex-column price_box flex-1">
						<text class="fs26 fw-600">{{userbalance[1]['coinname']}}</text>
						<view class="fs48 fw-600">{{ myBalance | integer(2, true) }}</view>
						<view class="fs24">
							<text>冻结：</text>
							<text>{{userbalance[1]['lockbalance']}}</text>
						</view>
					</view>
					<view class="flex">
						<text @click="rechargeFn()" class="rechargeBtn mr-24 flex jc-center fs25">充值</text>
						<text @click="withdrawFn(1)"
							class="rechargeBtn flex jc-center fs25">提现</text>
					</view>
				</view>
				<view class="plr-24 flex-between mt-20 border-top pt-16 pb-20" style=" background-color: #FFC15B;">
					<view class="flex fs28 ai-center" @click="Jump('/pages/mine/wallet/detail/detail?&coinCode=3')">
						<text style="color: #482000;">{{userbalance[3]['coinname']}}：</text>
						<view style="color: #482000; font-weight: 600;">{{ myBalance3 | integer(2, true) }}</view>
						<m-icon class="ml-12" size="24" color="#482000" type="icon-qianjin" />
					</view>
					<view class="">
						<text @click="withdrawFn(3)"
							class="rechargeBtn flex jc-center fs25">提现</text>
					</view>
				</view>
			</view>
			<m-block class="flex text-white fs26 plr-32 ptb-24 mb-24 jc-space-around afterBB"
				bg-color="linear-gradient(133deg, #FB3D70 0%, #FF4340 100%)" radius="12">
				<view class="flex-column">
					<view class="flex" @click="Jump('/pages/mine/wallet/detail/detail?&coinCode=2')">
						<text>{{userbalance[2]['coinname'] ||'打印积分'}}</text>
						<m-icon size="32" type="jinru" class="ml-12" />
					</view>
					<text class="mtb-8 fs28 fw-600">{{ myBalance2 | integer(2, true) || 0}}</text>
					<view class="pr-16 transferBtn" @click="Toast('暂未开放')">
						<text>转账</text>
					</view>
				</view>
				<view class="flex-column">
					<view class="flex" @click="Jump('/pages/mine/wallet/detail/detail?&coinCode=4')">
						<text>{{userbalance[4]['coinname'] ||'AI积分'}}</text>
						<m-icon size="32" type="jinru" class="ml-12" />
					</view>
					<text class="mtb-8 fs28 fw-600">{{ myBalance4 | integer(2, true) || 0}}</text>
					<view class="pr-16  transferBtn" @click="Toast('暂未开放')">
						<text>转账</text>
					</view>
				</view>
			</m-block>
		</m-block>
		<!-- 筛选条件 -->
		<m-block bg-color="#fff" radius="0" class="ptb-16 plr-32">
			
			<picker @change="bindTradeChange" :value="tradecurrentIdx" range-key="name" :range="payType1">
				<view class="flex">
					<view>{{payType[tradeType]}}</view>
					<m-icon spa="10" color="#C0C0C0" type="icon-xiangxia"></m-icon>
				</view>
			</picker>
		</m-block>
		<m-block class="flex-1" bg-color="#F6F6F6" radius="0" style="overflow: auto;">
			<m-block gap="0 20" spa="24 0" v-if="list.length > 0" bg-color="unset">
				<view class="list_item" v-for="item in list">
					<view class="flex-between it-text">
						<view>{{payType[item.tradetype]}}</view>
						<view style="font-size: 32rpx;" :style="{color:item.payout > item.income?'red':'#4cd964'}">
							<text v-if="item.payout">-{{item.payout}}</text>
							<text v-if="item.income">+{{item.income}}</text>
						</view>
					</view>
					<view class="flex-between it-text1">
						<view>{{item.createtime.replace("T"," ")}}</view>
						<view class="">
							<text class="fs24">{{item.state | tradeState()}}</text>
						</view>
					</view>
					<view class="flex-between it-text1">
						<view class="">
							<text>{{item.tradedescription}}</text>
						</view>
					</view>
				</view>
			</m-block>
			<!-- 加载更多 -->
			<uni-load-more v-if="list.length > 0" :status="loadStatus"></uni-load-more>
			<!-- 缺省页 -->
			<view class="empty_box" v-if="list.length == 0">
				<m-empty title="暂无数据" size="300" gap="200 0 0 0" :loading="isLoading" icon='noData'></m-empty>
			</view>
		</m-block>
		<!-- 实名认证提示 -->
		<m-dialog title="提示" :loading="btnLoading" :showCancel="true" :isShow="tishiShow" @handleCancel="tishiShow = false;btnLoading = false;
			" @handleConfirm="tishiShow=false;Jump('/pages/mine/information/information');">
			<view class="ta-center ptb-48">
				需完成实名认证,立即前往认证
			</view>
		</m-dialog>
	</m-layout>
</template>

<script>
	import { GetUserBalanceRecord } from "@/api/Trade.js" // 引入接口
	import { getCaption } from "@/utils/tools.js" // 引入工具库
	import { mapState } from 'vuex'
	import { balance } from "@/api/Users.js"
	export default {
		data() {
			return {
				btnLoading:false,
				tishiShow:false,
				isLoading: false,
				loadStatus: 'more', // more:加载前的状态，loading:加载中的状态，nomore:没有更多的状态
				scrollTop: 0,
				pageIndex: 1, // 当前页数
				pageSize: 1,
				pageCount: 1, // 列表总页数（用于加载更多）
				list: [],
				tradecurrentIdx: 0,
				tradeType: 0, // 交易类型
				coinCode: "1",
			}
		},
		computed: {
			...mapState({
				userinfo: state => state.user.userinfo,
				userbalance: state => state.user.userbalance,
				enum: state => state.general.enum,
			}),
			myBalance() {
				let c = 0;
				c = this.userbalance[1].balance - this.userbalance[1].lockbalance;
				return c;
			},
			myBalance2() {
				let c = 0;
				c = this.userbalance[2] ? (this.userbalance[2].balance - this.userbalance[2].lockbalance) : 0;
				return c;
			},
			myBalance3() {
				let c = 0;
				c = this.userbalance[3] ? (this.userbalance[3].balance - this.userbalance[3].lockbalance) : 0;
				return c;
			},
			myBalance4() {
				let c = 0;
				c = this.userbalance[4] ? (this.userbalance[4].balance - this.userbalance[4].lockbalance) : 0;
				return c;
			},
			TradeType() {
				return this.enum['TradeType']
			},
			typeList() {
				return {
					'1': [0, 1, 2, 5, 8, 11, 12, 13, 14, 16], // 个人账户
					'2': [0, 3, 4, 9, 15], // 对公账户
				} [this.coinCode]
				// 0:"全部"
				// 1:"充值"
				// 11:"管理奖"
				// 12:"代理奖"
				// 13:"退款"
				// 14:"支付运费"
				// 15:"购物返券"
				// 16:"销售奖"
				// 2:"提现"
				// 3:"转出"
				// 4:"转入"
				// 5:"分润"
				// 6:"系统充值"
				// 7:"系统扣款"
				// 8:"购物消费"
				// 17: "AI美食机销售奖"
				// 18: "AI美食机管理奖"
				// 19: "AI美食机代理奖"
				// 20: "AI美食机分润"
				// 21: "购物返利"
				// 22: "经销商奖励"
			},
			payType() {
				return this.enum['TradeType']
			},
			payTypeTotal() {
				let a = this.enumObjToArr(this.payType, 'id', 'name');
				return a || []
			},
			payType1() {
				const a = this.payTypeTotal.filter(item => {
					return this.typeList.indexOf(Number(item.id)) !== -1
				})
				return a || []
			},
		},
		async onShow() {
			this.init();
			await balance();
		},
		onPageScroll({ scrollTop }) {
			this.scrollTop = scrollTop;
		},

		onPullDownRefresh() {
			this.init();
		},
		onReachBottom() {
			if (this.pageIndex < this.pageCount) {
				this.pageIndex += 1;
				this.getList();
			}
		},
		methods: {
			rechargeFn() {
				this.Jump('/pages/wallet/recharge/recharge')
			},
			withdrawFn(type){
				console.log('this.userinfo===>', this.userinfo)
				if (!this.userinfo.truename) return this.tishiShow=true;
				this.Jump(`/pages/wallet/withdraw/withdraw?&cardtype=${type}`)
			},
			// 初始化
			init() {
				let date = this.formatDate(new Date(), 'yyyy-MM-dd').split('-');
				this.searchYear = date[0];
				this.searchMonth = date[1];
				this.dateStr = this.searchYear + "年" + this.searchMonth + "月";
				this.initData();
			},
			initData() {
				// 初始默认数据
				this.pageIndex = 1;
				this.pageSize = 10;
				this.pageCount = 1;
				this.list = [];
				// 网络请求
				this.requestData();
			},
			// 网络请求
			requestData() {
				this.getList();
			},
			///////////////////////////////////// 事件监听 ////////////////////////////////////////
			// 日期选择监听
			bindDateChange(e) {
				let date = e.detail.value.split('-');
				this.searchYear = date[0];
				this.searchMonth = date[1];

				this.dateStr = this.searchYear + "年" + this.searchMonth + "月";
				this.initData();
			},
			// 交易类型监听
			bindTradeChange({ detail: { value } }) {
				this.tradeType = Number(this.payType1[value]['id'])
				this.initData();
			},
			///////////////////////////////////// 网络请求 ////////////////////////////////////////
			// 获取资金列表
			async getList() {
				this.isLoading = true;
				this.loadStatus = 'loading';
				let res;
				const info = {
					PageIndex: this.pageIndex,
					PageSize: this.pageSize,
					type: this.tradeType,
					coinid: this.coinCode
				}
				const { success, list, pageCount } = await GetUserBalanceRecord(info);
				this.isLoading = false;
				uni.stopPullDownRefresh();
				if (success) {
					this.list = [...this.list, ...list];
					this.pageCount = pageCount; // 得到总页数
					this.loadStatus = this.pageIndex < this.pageCount ? 'more' : 'nomore';
				}
			},
		}
	}
</script>

<style lang="scss">
	.wallet {
		height: 100%;
		background: linear-gradient(133deg, #474747 0%, #232323 100%) no-repeat;

		::v-deep.layout-content {
			// overflow: hidden;
			flex: 1;
			display: flex;
			flex-direction: column;
			padding-left: 0rpx !important;
			padding-right: 0rpx !important;
			padding-bottom: 0px !important;
		}

		.totalBox {
			padding: 0px 16rpx 0rpx !important;
			background: linear-gradient(133deg, #474747 0%, #232323 100%) no-repeat;
			background-size: 100% 326rpx;

			._total {
				box-sizing: border-box;
				margin-left: 20rpx;
				margin-right: 20rpx;
				height: 270rpx;
				background: url('../../../static/images/pages/wallet/totalBg.png') no-repeat;
				background-size: 100% 100%;
				.border-top{
					border-top: 2rpx solid rgba(255,255,255,0.8);
				}
			}
		}
	}

	.rechargeBtn {
		color: #FFF6CF;
		width: 58px;
		height: 28px;
		background: linear-gradient(360deg, #C89645 0%, #E0AE5C 100%) !important;
		box-shadow: 0px 4px 4px 0px rgba(255, 207, 28, 0.17);
		border-radius: 19px 19px 19px 19px;
		opacity: 1;
	}

	.list_item {

		margin-bottom: 12rpx;
		background-color: #fff;
		padding: 20rpx 24rpx;
		border-radius: 12rpx;

		.it-text {
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 600;
			color: #333333;
		}

		.it-text1 {
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #97979F;
			margin-top: 10rpx;
		}
	}

	.list_item:nth-of-type(1) {
		border-top: unset !important;
	}
	.transferBtn{
		background-color: rgba(255, 255, 255, 0.2);
		border-radius: 50rpx;
		text-align: center;
		padding: 8rpx 10rpx;
		font-size: 24rpx;
	}
	.afterBB{
		position: relative;
	}
	.afterBB::after{
		position: absolute;
		content: "";
		width: 2rpx;
		background-color: rgba(255, 255, 255, 0.2);;
		height: 60%;
	}
</style>